import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import { usePermissStore } from '../store/permiss';
import Home from '../views/home.vue';

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        redirect: '/dashboard',
    },
    {
        path: '/',
        name: 'Home',
        component: Home,
        children: [
            {
                path: '/dashboard',
                name: 'dashboard',
                meta: {
                    title: '系统首页',
                    permiss: '1',
                },
                component: () => import('../views/dashboard.vue'),
            },
            {
                path: '/tabs',
                name: 'tabs',
                meta: {
                    title: 'tab标签',
                    permiss: '3',
                },
                component: () => import('../views/tabs.vue'),
            },
            {
                path: '/donate',
                name: 'donate',
                meta: {
                    title: '鼓励作者',
                    permiss: '14',
                },
                component: () => import('../views/donate.vue'),
            },
            {
                path: '/permission',
                name: 'permission',
                meta: {
                    title: '权限管理',
                    permiss: '13',
                },
                component: () => import('../views/permission.vue'),
            },
    
            {
                path: '/user',
                name: 'user',
                meta: {
                    title: '个人中心',
                },
                component: () => import('../views/user.vue'),
            },
    
            {
                path: '/export',
                name: 'export',
                meta: {
                    title: '导出Excel',
                    permiss: '2',
                },
                component: () => import('../views/export.vue'),
            },
            {
                path: '/import',
                name: 'import',
                meta: {
                    title: '导入Excel',
                    permiss: '2',
                },
                component: () => import('../views/import.vue'),
            },
            // ========================================================
            {
                path: '/article',
                name: 'article',
                meta: {
                    title: '文章管理',
                    permiss: '3',
                    isKeepAlive: true
                },
                component: () => import('../views/article/article.vue'),
            },
            // 添加的轮播图组件
            {
                path: '/banner',
                name: 'banner',
                meta: {
                    title: '轮播图管理',
                    permiss: '2',
                    isKeepAlive: true
                },
                component: () => import('../views/banner/banner.vue'),
            },
             // 添加的导航管理组件
             {
                path: '/nav',
                name: 'nav',
                meta: {
                    title: '导航管理',
                    permiss: '2',
                    isKeepAlive: true
                },
                component: () => import('../views/nav/nav.vue'),
            },
            // 添加的收藏管理组件
            {
                path: '/like',
                name: 'like',
                meta: {
                    title: '收藏管理',
                    permiss: '2',
                    isKeepAlive: true
                },
                component: () => import('../views/like/like.vue'),
            },
            // 添加的评论管理组件
            {
                path: '/comment',
                name: 'comment',
                meta: {
                    title: '评论管理',
                    permiss: '2',
                    isKeepAlive: true
                },
                component: () => import('../views/comment/comment.vue'),
            },
             // 添加的用户管理组件
             {
                path: '/users',
                name: 'users',
                meta: {
                    title: '用户管理',
                    permiss: '2',
                    isKeepAlive: true
                },
                component: () => import('../views/users/users.vue'),
            },
            // ========================================================
        ],
    },
    {
        path: '/login',
        name: 'Login',
        meta: {
            title: '登录',
        },
        component: () => import(/* webpackChunkName: "login" */ '../views/login.vue'),
    },
    {
        path: '/403',
        name: '403',
        meta: {
            title: '没有权限',
        },
        component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'),
    },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    document.title = `${to.meta.title} | 管理系统`;
    const role = localStorage.getItem('ms_username');
    const permiss = usePermissStore();
    if (!role && to.path !== '/login') {
        next('/login');
    } else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
        // 如果没有权限，则进入403
        next('/403');
    } else {
        next();
    }
});

export default router;
